<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="品牌管理" :visible.sync="dialogVisible" width="400px">
        <AddBrands ref="addRef" @getBrandList="getBrandList" />
        <EditBrands ref="editRef" @getBrandList="getBrandList" />
        <el-button plain size="small" class="plain_blue" icon="el-icon-circle-plus-outline" style="width:100%" @click="addBrand">添加品牌</el-button>
        <div class="brand_title">品牌列表</div>
        <el-input placeholder="请输入牌名称/ID搜索" size="small" prefix-icon="el-icon-search" class="mt_12" v-model="userQuery" clearable>
        </el-input>
        <div class="brand_list">
            <div class="brand_item flexbox flexcenter flexbetween" v-for="item in filteredData(userQuery,brandList,'brand_id','brand_name')" :key="item.id">
                <div>
                    <div class="brand_name">{{item.brand_name}}</div>
                    <div class="brand_id">品牌标识ID：{{item.brand_id}}</div>
                    <div class="brand_status">数据拉取状态：{{item.state==0?'已关闭':'已开启'}}</div>
                    <div class="brand_status">飞瓜数据时间：{{item.start_batch_num | formatDate}} — {{item.end_batch_num | formatDate}}  </div>
                    <!-- <div class="brand_status">种草视频拉取天数：{{item.zc_max_date}}天</div> -->
                    <!-- <div class="brand_status">带货视频拉取天数：{{item.dh_max_date}}天</div> -->
                    <div class="brand_status flexbox flexcenter">
                        <template v-if="item.status==0">
                            数据等待更新...
                        </template>
                        <template v-else-if="item.status==1">
                            <i class="el-icon-loading"></i>
                            数据更新中
                        </template>
                        <template v-else>
                            最后更新时间：{{item.update_time}}
                        </template>
                    </div>
                </div>
                <div class="flexbox flexcenter">
                    <span class="icon_btn" @click.stop="editBrand(item)"><img src="../../assets/img/edit_icon.svg" alt=""></span>
                    <span class="icon_btn" @click.stop="deletBrand(item,index)"><img src="../../assets/img/ys_icon2.svg" alt=""></span>

                    <el-tooltip class="item" effect="dark" content="" placement="top">
                        <div slot="content" style="font-size:12;color:#fff;line-height:18px">
                            数据更新
                        </div>
                        <el-button type="primary" size="mini" circle style="margin-left:10px" :disabled="getStatus(item.status,item.update_time)" @click="updataBrand(item.brand_id)">
                            <i class="el-icon-refresh"></i>
                        </el-button>
                    </el-tooltip>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="dialogVisible = false" class="el-button-width">关 闭</el-button>
        </span>
    </el-dialog>
</template>

<script>
import AddBrands from "./AddBrands";
import EditBrands from "./EditBrands";
export default {
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            brandList: [],
            userQuery:"",
        };
    },
    filters: {
        formatDate(value) {
            // 检查原始日期是否为 null 或空字符串
            if (!value) {
                return ""; // 或者其他默认值
            }
            const valueString = value.toString();
            const year = valueString.substr(0, 4);
            const month = valueString.substr(4, 2);
            const day = valueString.substr(6, 2);
            return `${year}-${month}-${day}`;
        },
  },
    created() {},
    methods: {
        // 筛选
        filteredData(query, list, id, name) {
            var list = list,
                query = query;

            if (!query) {
                return list;
            }
            query = query.trim();
            list = list.filter(function (item) {
                if (item[name]) {
                    if (item[id] == query || item[name].indexOf(query) !== -1) {
                        return item;
                    }
                }
            });
            return list;
        },

        addBrand() {
            this.$refs.addRef.dialogVisible = true;
        },

        editBrand(item) {
            this.$refs.editRef.getData(item);
        },

        getStatus(status, update_time) {
            let is_true = false;
            let nowDate = new Date() * 1;
            let upDate = new Date(update_time) * 1;
            let date1 = nowDate - upDate;
            let date = date1 / (1000 * 3600 * 24);
            if (status == 0) {
                is_true = true;
            } else if (status == 1) {
                is_true = true;
            } else {
                if (date < 7) {
                    is_true = true;
                }
            }

            return is_true;
        },

        //获取品牌
        async updataBrand(brand_id) {
            const { data: res } = await this.$http.post(
                "fxdata/fxboard/brandUpdata",
                {
                    brand_id: brand_id,
                }
            );
            let result = JSON.parse(res);
            if (result.Code !== 200) {
                this.$message.error(result.Msg);
                return;
            } else {
                this.getBrandList();
                this.$message({
                    type: "success",
                    message: result.Msg,
                });
            }
        },

        //获取品牌
        async getBrandList() {
            const { data: res } = await this.$http.post(
                "fxdata/fxboard/brandList",
                {
                    page: 1,
                    limit: 1000,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.brandList = res.data;
            }
        },

        // 删除
        deletBrand(item) {
            this.$confirm("是否要删除该品牌?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "fxdata/fxboard/brandDelete",
                        {
                            id: item.id,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.getBrandList();
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                    }
                })
                .catch(() => {});
        },
    },
    components: {
        AddBrands,
        EditBrands,
    },
};
</script>


<style scoped>
.brand_title {
    margin-top: 24px;
    font-size: 14px;
    line-height: 20px;
    color: #17233d;
}
.brand_list {
    max-height: 350px;
    overflow-y: auto;
    margin: 0 -20px;
    padding: 0 20px;
    margin-top: 12px;
}
.brand_name {
    font-size: 14px;
    line-height: 20px;
    color: #17233d;
}
.brand_id {
    color: #616c85;
    font-size: 14px;
    line-height: 20px;
    height: 20px;
    margin-top: 4px;
}
.brand_status {
    font-size: 12px;
    color: #b4b7bd;
    height: 16px;
    line-height: 16px;
    margin-top: 4px;
}
.brand_item {
    padding: 12px 0;
    border-bottom: 1px solid #ebebeb;
}
</style>
